/*
 * @Author: zxc
 * @Date: 2020-10-07 10:35:28
 * @LastEditTime: 2020-10-08 15:36:18
 * @LastEditors: zxc
 * @Description: snabbdom 一些基础的用法
 */
import { h,init } from "snabbdom";
/**
 * 关于为什么在这里要使用0.7.4版本
 * 因为如果使用最新版本需要这么写：
 * import { h } from 'snabbdom/build/package/h';
 * import { init } from 'snabbdom/build/package/init';
 * import { classModule } from 'snabbdom/build/package/modules/class';
 * 关于作者的回复 ：https://github.com/snabbdom/snabbdom/issues/723
 * 中文的回答：https://github.com/lagoufed/vuejs-enhancement/issues/2
 */
console.log(init)

/**
 * init 接收参数：数组、模块
 * 返回值 ：一个patch函数，它的作用是比对两个vnode的差异，并更新至真实dom
 */
let patch = init([])

/**
 * h接收两个参数，第一个是标签+选择器
 * 第二个参数 在没有引入模块的时候 是文本内容或它的子元素（是一个数组）
 * 如果引入模块 ，那么第二个参数会是一个对象，其它是模块信息的描述，可以参考snabbdom-modules.js
 * 引入模块之后，第三个参数就是等同于原来未引入模块时的第二个参数
 */
let VNode = h('div#container.cls','helloWorld')

let app = document.getElementById('app')

/**
 * path函数接收两个参数
 * 第一个参数它可以Dom元素，patch会自动将之转换成Vnode
 * 第二个参数是一个Vnode
 * 它有一个返回值，是Vnode
 */
let oldValue = patch(app,VNode)


VNode = h('div.newNode',[
  h('h1.newcls','a title'),
  h('p','hahaha')
])
let twiceOldNode = patch(oldValue,VNode)

//清空节点
setTimeout(() => {
  patch(twiceOldNode,h('!'))
}, 2000);